<template>
  <div class="bg">
    <div class="back_box">
      <div class="back_btn">
        <van-icon
          @click="backHandler"
          v-show="true"
          name="arrow-left"
          size="22"
          color="#fff"
        />
      </div>
      <div class="back_text">订单详情</div>
      <div class="back_text1">
        <slot></slot>
      </div>
    </div>
    <!-- 订单状态 -->
    <div class="cantiant">
      <div style="
          display: flex;
          color: #fff;
          align-items: center;
          line-height: 50px;
          justify-content: space-between;
        ">
        <div style="display: flex; align-items: center">
          <van-icon
            name="clock-o"
            color="#fff"
            size="22"
            style=""
          />
          <div style="margin-left: 7px; font-size: 17px">
            {{dataInfo.status_desc}}
          </div>
        </div>
        <!-- <div style="font-size: 12px">预计2022-10-25送达</div> -->
      </div>
      <!-- 快递信息 -->
      <div
        class="logistics"
        v-if="dataInfo.item[0].status_code != 'nopay'"
      >
        <div
        @click="toExpressInfo"
          class="logistics-detail"
          style="display: flex; align-items: center; justify-content: space-between;"
        >
          <div>
            <div style="color: #222222; line-height: 30px; font-size: 13px;font-weight: 600;">
              {{dataInfo.item[0].express_name?dataInfo.item[0].express_name+"：":""}}{{dataInfo.item[0].status_name}}
            </div>
            <div style="display: flex">
              <div style="font-size: 12px; color: #333333">
                {{dataInfo.item[0].status_desc}}
              </div>
            </div>
          </div>
          <div style="color: #6f6f6f; margin-left: 4.5vw">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>

      <!-- 付款提示 -->
      <div
        class="logistics"
        v-if="dataInfo.item[0].status_code == 'nopay'"
      >
        <div
          class="logistics-detail"
          style="display: flex;align-items: center;justify-content: space-between;"
        >
          <div>
            <div style="color: #222222; line-height: 30px; font-size: 16px">
              需付款：￥{{dataInfo.total_fee}}
            </div>
            <div style="display: flex; align-items: center">
              <!-- <div style="font-size: 12px; color: #333333">剩余时间：</div>
              <div style="font-size: 12px; color: #fe332c">
                <van-count-down :time="time" style="color: #fe332c" />
              </div> -->
            </div>
          </div>
          <div style="color: #6f6f6f; margin-left: 4.5vw">
            <div
              @click="topay(dataInfo)"
              style="color: #fff; font-size: 10px;padding: 0px 20px;line-height: 30px;background: linear-gradient(270deg, #fe2e27 0%, #fe877f 100%);border-radius: 22px;"
            >
              去支付
            </div>
          </div>
        </div>
      </div>
      <!-- 个人地址 -->
      <div
        class="logistics"
        v-if="dataInfo.item[0].status_code != 'nopay'"
      >
        <div class="logistics-detail">
          <div style="display: flex;border-bottom: 1px solid #e7e7e7;line-height: 40px;">
            <div>{{ dataInfo.consignee }}</div>
            <div style="color: #666666; padding-left: 10px;font-size: 14px;">
              {{ dataInfo.phone }}
            </div>
          </div>
          <div style="color: #333333; font-size: 14px; padding: 10px 0">
            {{ dataInfo.province_name }}{{ dataInfo.city_name
            }}{{ dataInfo.area_name }}{{ dataInfo.address }}
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="info goods-info">
        <div class="myteam_title">
          <span>商品信息</span>
        </div>
        <div class="goods-detail">
          <div style="">
            <img
              :src="dataInfo.item[0].goods_image"
              alt=""
              style="width: 75px; height: 75px; border-radius: 10px"
            />
          </div>
          <div class="text-info">
            <div style="font-size: 13px">
              {{ dataInfo.item[0].goods_title }}
            </div>
            <div style="font-size: 12px; line-height: 20px; color: #999999">
              数量：{{ dataInfo.item[0].goods_num }}
            </div>
            <div style="font-size: 13px; color: #222222">
              ￥{{ dataInfo.item[0].goods_price }}
            </div>
          </div>
        </div>
        <div class="goods-money">
          共{{ dataInfo.item[0].goods_num }}件商品，<span style="color: #222222">合计：</span>
          <span style="color: #fe4b20">￥{{ dataInfo.item[0].goods_price }}</span>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="info order-info">
        <div
          class="myteam_title"
          style="border-bottom: 1px solid #e7e7e7; line-height: 45px"
        >
          <i></i><span>订单信息</span>
        </div>
        <div class="detail">
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">订单编号</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.order_sn }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">下单时间</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.createtime | formatDate }}</span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
            v-if="dataInfo.item[0].status_code != 'nopay'"
          >
            <span style="color: #333333; line-height: 30px">支付方式</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo | formatPayType }}</span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
            v-if="dataInfo.item[0].status_code != 'nopay'"
          >
            <span style="color: #333333; line-height: 30px">配送方式</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.item[0].dispatch_type | dispatchType }}</span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
            v-if="dataInfo.item[0].status_code != 'nopay'"
          >
            <span style="color: #333333; line-height: 30px">物流公司</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.item[0].express_name || "无" }}
            </span>
          </div>
          <div
            style="display: flex; justify-content: space-between"
            v-if="dataInfo.item[0].status_code != 'nopay'"
          >
            <span style="color: #333333; line-height: 30px">快递单号</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.item[0].express_no || "无" }} |
              <div
                style="float: right; color: #fe4b20"
                @click="copy(dataInfo.item[0].express_no)"
              >
                复制
              </div>
            </span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 40px; min-width: 50px">备注</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.remark }}</span>
          </div>
        </div>
      </div>
      <!-- 商品费用 -->
      <div
        class="info order-info"
        v-if="dataInfo.item[0].status_code != 'nopay'"
      >
        <div class="detail">
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">商品总额</span>
            <span style="color: #fe362f; line-height: 30px">
              {{ dataInfo.item[0].goods_price }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 30px">运费</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.dispatch_amount ? dataInfo.dispatch_amount : "0.00" }}</span>
          </div>
          <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #e7e7e7;">
            <span style="color: #333333; line-height: 30px">优惠</span>
            <span style="color: #999999; line-height: 30px">
              {{ dataInfo.discount_fee }}</span>
          </div>
          <div style="display: flex; justify-content: space-between">
            <span style="color: #333333; line-height: 40px">合计</span>
            <span style="color: #fe362f; line-height: 40px">
              {{ dataInfo.total_amount }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮集合 -->
    <div class="button-info">
      <div
        class="button"
        v-if="dataInfo.item[0].status_code == 'noget'"
        @click="confirmHanlder(dataInfo.id)"
      >
        确认收货
      </div>
      <div
        v-if="dataInfo.item[0].status_code == 'nopay'"
        @click="topay(dataInfo)"
        class="button"
        style="background: linear-gradient(270deg, #FE2E27 0%, #FE877F 100%);color: white;"
      >
        去支付
      </div>
      <div
        v-if="dataInfo.item[0].status_code == 'nopay'"
        @click="cancelOrder(dataInfo)"
        class="button"
        style="border: 1px solid #D1D2D5;color: #999999;"
      >
        取消订单
      </div>
      <div    class="button"  @click="applyHandle(dataInfo)"
        v-if="
          (dataInfo.item[0].status_code == 'nosend' ||
            dataInfo.item[0].status_code == 'noget') &&
          (dataInfo.one_day == 0  || dataInfo.one_day == 5)
        "
      >
        {{ dataInfo.day == 2 ? "申请转户" : "申请退货" }}
      </div>

    </div>
    <van-popup
      v-model="cancelReason"
      position="bottom"
      :style="{ height: '65%' }"
    >
      <div class="popup">
        <div class="popup-title">取消订单</div>
        <div class="popup-tip">
          <p>温馨提示：</p>
          <p>1、限时特价、预约资格等购买优惠可能一并取消</p>
          <p>2、订单一旦取消，无法恢复</p>
          <p>3、其他规定</p>
        </div>
        <div class="cancel-reason">
          <div class="cancel-title">请选择取消订单的原因（必选）：</div>
          <van-radio-group
            v-model="radio"
            @change="radioChange"
          >
            <van-radio
              :name="item.title"
              checked-color="#FE4B20"
              v-for="item in cancelReasonList"
              :key="item.name"
              class="list"
            >{{ item.title }}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div
        class="popup-button"
        @click="cancelSubmit"
      >提交</div>
    </van-popup>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import { Toast, CountDown } from "vant";
import { geOrderDetail } from "@/api/api";
import { Icon } from "vant";

import {
  getOrders,
  getOrders2,
  putOrders,
  cancelOrderApi,
  putselfWithdrawal,
  orderConfirm,
} from "@/api/api";
import moment from "moment";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      id: "",
      dataInfo: {},
      radio: "",
      cancelReason: false,
      cancelReasonList: [
        { name: 0, title: "不想要了" },
        { name: 1, title: "地址填写错误" },
        { name: 2, title: "商品降价" },
        { name: 3, title: "商品错选/多选" },
      ],
      time: 3000,
    };
  },
  filters: {
    formatDate(val) {
      if (!val) return "";
      let time = moment(val * 1000).format("YYYY-MM-DD HH:mm:ss");
      return time;
    },
    formatPayType(value) {
      let val = value.pay_type;
      let is_old = value.is_old;
      if (val == "wechat") {
        return "微信支付";
      }
      if (val == "alipay") {
        return "支付宝";
      }
      if (val == "wallet") {
        if (is_old == 0) {
          return "钱包支付";
        } else if (is_old == 1) {
          return "老余额支付";
        } else if (is_old == 2) {
          return "零批收益支付";
        }
      }
      if (val == "score") {
        return "积分支付";
      }
      if (val == "shopping") {
        return "提货券";
      }
    },
    dispatchType(val) {
      if (val == "express") {
        return "物流快递";
      }
      if (val == "selfetch") {
        return "自提";
      }
      if (val == "store") {
        return "商家配送";
      }
      if (val == "autosend") {
        return "自动发货";
      }
    },
  },
  created() {
    this.id = this.$route.params.id;
    // if (this.$route.params.id == undefined) {
    //   this.$router.go(-1);
    // }
    this.initData();
  },
  methods: {
    toExpressInfo(){
      this.$router.push({name:"expressInfo",params:{
        id: this.id
      }})
    },
    backHandler() {
      this.$router.go(-1);
    },
    copy(val) {
      this.$copyText(val)
        .then((result) => {
          Toast("复制成功");
        })
        .catch((err) => {
          Toast("复制失败");
        });
    },
    initData() {
      geOrderDetail({ id: this.id })
        .then((res) => {
          if (res.data.code == 1) {
            this.dataInfo = res.data.data;
            console.log(88888, this.dataInfo);
            this.time = res.data.data.countdown * 1000;
            //  this.time = 300000;
          }
        })
        .catch((err) => {});
    },
    //确认收货
    confirmHanlder(id) {
      orderConfirm({ order_id: id }).then((res) => {
        if (res.data.code == 1) {
          this.$dialog
            .alert({
              message: "恭喜您，收到货物啦~",
            })
            .then(() => {
              this.backHandler();
            });
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    // 取消订单
    cancelOrder(data) {
      this.cancelId = data.id;
      this.$dialog
        .alert({
          title: "取消订单",
          message: "您确认要取消该订单吗？订单取消后 只能再次重新购买。",
          showCancelButton: true,
          confirmButtonText: "取消订单",
          cancelButtonText: "我再想想",
        })
        .then(() => {
          this.cancelReason = true;
        });
    },
    // 取消订单提交
    cancelSubmit() {
      let quertData = {
        id: this.cancelId,
        cancel_count: this.radio,
      };
      this.cancelReason = false;
      cancelOrderApi(quertData).then((res) => {
        if (res.data.code == 1) {
          this.backHandler();
        }
        Toast(res.data.msg);
      });
    },
    // 申请处理=转户，退货
    applyHandle(data) {
      if (data.day == 2) {
        this.changeUser(data);
      } else {
        this.returnOrder(data);
      }
    },
    // 申请转户
    changeUser(data) {
      this.$router.push({
        name: "orderChangeUser",
        params: { orderId: data.id },
      });
    },
    // 支付
    topay(item) {
      if (item.one_day == 0 || item.one_day == 2) {
        this.$router.push({
          name: "pay",
          params: {
            id: item.goods_id,
            one_day: 0,
            has_order: true,
            order_sn: item.order_sn,
            fromPath: "orders",
          },
        });
      } else {
        this.$router.push({
          name: "one_month_pay",
          params: {
            id: item.goods_id,
            one_day: 1,
            has_order: true,
            order_sn: item.order_sn,
          },
        });
      }
    },
    returnOrder(orederDetail) {
      // var orederDetail = this.list[index];
      this.$router.push({
        name: "returnOrder",
        params: {
          id: orederDetail.id,
          money: orederDetail.total_amount,
          goods_id: orederDetail.item[0].id,
          phone: orederDetail.phone,
        },
      });
    },
  },
};
</script>
<style scoped>
body {
  background: #f2f3f7 !important;
  height: 100vh !important;
}
</style>
<style scoped>
.bg {
  background: linear-gradient(180deg, #ee4034 0%, #f8f8f8 100%);
  height: 50vh;
}
.cantiant {
  padding: 5vw 3vw;
  padding-bottom: 100px;
}
.logistics {
  background: #fff;
  /* padding: 2vw; */
  padding: 10px 15px;
  margin-bottom: 3vw;
  line-height: 26px;
  border-radius: 8px;
}
.logistics-detail {
}
.myteam_title {
  margin-bottom: 10px;
  display: flex;
}
/* .myteam_title i {
  background: #ff491f;
  display: block;
  height: 4vw;
  width: 0.8vw;
} */
.myteam_title span {
  font-size: 15px;
  display: block;
  color: #222222;
  font-weight: bold;
}
.info {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 3vw;
  margin-bottom: 3vw;
  border-radius: 10px;
  padding-bottom: 0px;
}
.goods-info .goods-detail {
  display: flex;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  /* padding: 2vw 0; */
  border-radius: 10px;
}
.goods-info .goods-detail .text-info {
  margin-left: 3vw;
  line-height: 8vw;
}
.goods-info .goods-money {
  font-size: 3.3vw;
  color: #ccc;
  padding: 10px 0;
  text-align: right;
}
.order-info .detail {
  font-size: 14px;
  /* padding: 2vw 3vw; */
}
.button-info {
  /* display: flex;
  position: relative;
  width: 86vw; */
  background: #fff;
  height: 9vw;
  padding: 20px 10px;
  position: fixed;
  bottom: 0px;
  width: 100vw;
}
.button {
  /* position: absolute; */
  display: inline-block;
  color: #ff491f;
  border: 1px solid #ff491f;
  height: 8vw;
  width: 25vw;
  line-height: 8vw;
  border-radius: 4vw;
  text-align: center;
  float: right;
  /* margin-left: 10px; */
  margin-right: 20px;
  /* margin-left: 60vw; */
}

.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
#app {
  background-color: #f2f3f7 !important;
  height: 100vh !important;
}
</style>
<style scoped>
#app {
  background-color: #f2f3f7 !important;
  height: 100vh !important;
}

body {
  background: #f2f3f7 !important;
  height: 100vh !important;
}
.back_box {
  background-color: transparent !important;
  -webkit-box-shadow: 0px 0px 6px 0px transparent !important;
  box-shadow: 0px 0px 6px 0px transparent !important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}
.back_btn {
  width: 20vw;
  margin: 1.33vw 0 0 3vw;
  /* position: absolute; */
  /* left: 5.3vw; */
  /* top: 2.3vw; */
}
.back_btn img {
  width: 2.9vw;
  height: 5.8vw;
}
.back_text {
  font-size: 4.8vw;
  text-align: center;
  color: #fff;
  /* position: absolute; */
  /* right: 44vw; */
}
.back_text1 {
  font-size: 4.8vw;
  float: right;
  margin-right: 3vw;
  width: 20vw;
}
</style>
